<template>
  <div class="realtime">
    <div class="leftcontainer">
      <el-input
        placeholder="输入关键字进行过滤"
        class="realtimeInput"
        v-model="input"
      ></el-input>
      <el-tree
        :data="engineerTree"
        :props="props"
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        ref="tree"
      ></el-tree>
    </div>
    <div class="rightcontainer" v-show="isChild">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="tsp" name="tsp"></el-tab-pane>
        <el-tab-pane label="pm10" name="pm10"></el-tab-pane>
        <el-tab-pane label="pm2.5" name="pm25"></el-tab-pane>
        <el-tab-pane label="温度" name="temperature"></el-tab-pane>
        <el-tab-pane label="湿度" name="humidity"></el-tab-pane>
      </el-tabs>
      <div id="container" v-show="deviceDaily.length > 0"></div>
      <div id="noData" v-show="deviceDaily.length == 0">暂无数据</div>
    </div>
    <div class="nonecontainer" v-show="!isChild">请选择设备进行查看</div>
  </div>
</template>

<script>
import { get, postJSON, del } from "@/utils/request.js";
import moment from "moment";
import { Area } from "@antv/g2plot";

export default {
  data() {
    return {
      engineerTree: [],
      props: {
        // value: "id",
        label: "name",
        children: "children",
      },
      value: [],
      input: "",
      activeName: "tsp",
      params: {
        page: 1,
        pageSize: 50,
      },
      deviceDaily: [],
      area: {},
      isChild: false,
    };
  },
  created() {
    this.getEngineer();
  },
  mounted() {
    this.initChart();
  },
  watch: {
    input(val) {
      this.$refs.tree.filter(val);
    },
  },
  computed: {
    deviceData() {
      return this.deviceDaily.map((item) => {
        return {
          date: moment(item.insert_time).format("HH:mm"),
          [this.activeName]: parseInt(item[this.activeName]),
        };
      });
    },
  },
  methods: {
    //事件监听
    handleClick(tab, event) {
      this.updateChart();
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleNodeClick(obj, node) {
      console.log(obj);
      if (obj.engineer_id) {
        this.isChild = true;
        this.params.engineer_id = obj.engineer_id;
        this.params.device_id = obj.id;
        this.getDeviceDaily();
      } else {
        this.isChild = false;
      }
    },
    initChart() {
      this.area = new Area("container", {
        data: this.deviceData,
        xField: "date",
        yField: this.activeName,
        annotations: [
          {
            type: "text",
            position: ["min", "median"],
            content: "中位数",
            offsetY: -4,
            style: {
              textBaseline: "bottom",
            },
          },
          {
            type: "line",
            start: ["min", "median"],
            end: ["max", "median"],
            style: {
              stroke: "red",
              lineDash: [2, 2],
            },
          },
        ],
      });
      this.area.render();
    },
    updateChart() {
      this.area.update({
        data: this.deviceData,
        xField: "date",
        yField: this.activeName,
        annotations: [
          {
            type: "text",
            position: ["min", "median"],
            content: "中位数",
            offsetY: -4,
            style: {
              textBaseline: "bottom",
            },
          },
          {
            type: "line",
            start: ["min", "median"],
            end: ["max", "median"],
            style: {
              stroke: "red",
              lineDash: [2, 2],
            },
          },
        ],
      });
    },
    //网络请求
    getEngineer() {
      get("/engineer/findEngineerDeviceTree").then((res) => {
        this.engineerTree = res.data;
      });
    },
    getDeviceDaily() {
      get("/monitor/pageQueryTodayData", this.params).then((res) => {
        this.deviceDaily = res.data.list;
        console.log(this.deviceDaily);
        this.updateChart();
      });
    },
  },
};
</script>

<style>
.realtime {
  position: absolute;
  top: 0.5em;
  bottom: 0.5em;
  width: 100%;
  display: flex;
}
.leftcontainer {
  width: 250px;
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #ddd;
}
.realtimeInput {
  height: 50px;
}
.rightcontainer {
  flex: 1;
}
#container {
  width: 100%;
}
.nonecontainer {
  width: 100%;
  font-size: 20px;
  margin-top: 50px;
  text-align: center;
}
</style>